JavaScript去除非纯文本内容 - 如何利用正则、DOM与第三方库移除HTML标签
编辑：本站更新：2024-09-11 18:08:02人气：426
在处理网页数据或者进行前端开发时，我们经常需要对含有HTML标签的字符串进行清洗和过滤以提取出纯粹的文字内容。本文将深入探讨如何通过JavaScript的各种方式有效去除非纯文本内容——包括运用正则表达式、操作DOM以及借助一些知名的第三方库来实现这一目标。
### **1. 利用正则表达式移除HTML标签**
正则是最直接且简洁的方法之一用于剥离HTML标记：
function removeHtmlTags(text) {
return text.replace(/<[^>]*>/g, '');
}
let htmlString = '<p>Hello <strong>World</strong></p>';
console.log(removeHtmlTags(htmlString)); // 输出：Hello World
上述代码中定义了一个名为`removeHtmlTags`函数，它使用了全局匹配（/.../g）的正则表达式模式 `<[^>]*/>` 来查找并替换所有尖括号内的任何字符序列 —— 这实际上就是删除所有的 HTML 标签。
然而，请注意这种方法并非万无一失，在复杂或不规范的HTML结构面前可能会出现问题，并可能误删CDATA区段或者其他特殊格式的内容。
### **2. 使用 DOM Parser 方法解析并获取纯净文字**
浏览器内置的 `DOMParser API` 可提供一种更安全可靠的方式来清理HTML中的元素，确保只保留实际可见的文本部分：
function getPlainTextFrom HtmlUsingDomParser(htmlStr){
var parser = new DOMParser();
var doc = parser.parseFromString(htmlStr,'text/html');
let walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
let result = '';
while(walker.nextNode()) {
result += walker.currentNode.textContent;
}
return result;
}
var htmlContent = '<div><h1>Title</h1>This is some <span class="highlight">sample content.</span></div>';
console.log(getPlainTextFromHtmlUsingDomParser(htmlContent));
// 输出："Title\nThis is some sample content."
在这个方法里，首先创建一个DOM对象树并通过遍历其节点找到全部Text类型的子节点并将它们合并起来得到最终的纯文本结果。
### **3. 第三方库如 jQuery 或 cheerio 的解决方案**
对于大型项目或者是服务器端渲染的情况，我们可以考虑引入jQuery或是cheerio这样的辅助工具库来进行更为强大便捷的操作：
- **jQuery**:
$(htmlString).text(); // 返回去掉HTML标签后的纯文本
- **Cheerio (主要用于服务端)**
这是一个基于Node.js环境运行并在server-side模拟实现了完整jquery接口功能的小巧快速的类jq库：
const cheerio = require('cheerio');
let $ = cheerio.load('<div><b>Hello world!</b></div>');
let plainText = $('body').text();
console.log(plainText); // 输出：“Hello world!”
总结来说，选择哪种技术取决于具体场景需求和个人偏好。简单的正则表达适用于轻量级任务；而当涉及到复杂的文档结构时，则推荐采用原生的DOMparserAPI甚至是强大的第三方库诸如jQuery及Cheerio等手段达成目的。同时请注意每种方案的安全性和健壮性问题，特别是在面对恶意注入攻击的情况下需额外小心谨慎对待输入的数据。
### **1. 利用正则表达式移除HTML标签**
正则是最直接且简洁的方法之一用于剥离HTML标记：
javascript
function removeHtmlTags(text) {
return text.replace(/<[^>]*>/g, '');
}
let htmlString = '<p>Hello <strong>World</strong></p>';
console.log(removeHtmlTags(htmlString)); // 输出：Hello World
上述代码中定义了一个名为`removeHtmlTags`函数，它使用了全局匹配（/.../g）的正则表达式模式 `<[^>]*/>` 来查找并替换所有尖括号内的任何字符序列 —— 这实际上就是删除所有的 HTML 标签。
然而，请注意这种方法并非万无一失，在复杂或不规范的HTML结构面前可能会出现问题，并可能误删CDATA区段或者其他特殊格式的内容。
### **2. 使用 DOM Parser 方法解析并获取纯净文字**
浏览器内置的 `DOMParser API` 可提供一种更安全可靠的方式来清理HTML中的元素，确保只保留实际可见的文本部分：
javascript
function getPlainTextFrom HtmlUsingDomParser(htmlStr){
var parser = new DOMParser();
var doc = parser.parseFromString(htmlStr,'text/html');
let walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
let result = '';
while(walker.nextNode()) {
result += walker.currentNode.textContent;
}
return result;
}
var htmlContent = '<div><h1>Title</h1>This is some <span class="highlight">sample content.</span></div>';
console.log(getPlainTextFromHtmlUsingDomParser(htmlContent));
// 输出："Title\nThis is some sample content."
在这个方法里，首先创建一个DOM对象树并通过遍历其节点找到全部Text类型的子节点并将它们合并起来得到最终的纯文本结果。
### **3. 第三方库如 jQuery 或 cheerio 的解决方案**
对于大型项目或者是服务器端渲染的情况，我们可以考虑引入jQuery或是cheerio这样的辅助工具库来进行更为强大便捷的操作：
- **jQuery**:
javascript
$(htmlString).text(); // 返回去掉HTML标签后的纯文本
- **Cheerio (主要用于服务端)**
这是一个基于Node.js环境运行并在server-side模拟实现了完整jquery接口功能的小巧快速的类jq库：
javascript
const cheerio = require('cheerio');
let $ = cheerio.load('<div><b>Hello world!</b></div>');
let plainText = $('body').text();
console.log(plainText); // 输出：“Hello world!”
总结来说，选择哪种技术取决于具体场景需求和个人偏好。简单的正则表达适用于轻量级任务；而当涉及到复杂的文档结构时，则推荐采用原生的DOMparserAPI甚至是强大的第三方库诸如jQuery及Cheerio等手段达成目的。同时请注意每种方案的安全性和健壮性问题，特别是在面对恶意注入攻击的情况下需额外小心谨慎对待输入的数据。
www.php580.com PHP工作室 - 全面的PHP教程、实例、框架与实战资源
PHP学习网是专注于PHP技术学习的一站式在线平台，提供丰富全面的PHP教程、深入浅出的实例解析、主流PHP框架详解及实战应用，并涵盖PHP面试指南、最新资讯和活跃的PHP开发者社区。无论您是初学者还是进阶者，这里都有助于提升您的PHP编程技能。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。